<template>
    <div>
        <el-tabs type="border-card">
            <!--            出货记录表-->
            <el-tab-pane label="出货记录">
                <div class="title_xiao">出货记录表</div>
                <!--                搜索-->
                <el-row class="search-box">
                    <el-col :span="24">
                        <el-form :model="outHou" size="small" label-width="80px" class="search-form">
                            <el-form-item label="商品名称">
                                <el-input v-model="outHou.name" placeholder="请输入商品名称"></el-input>
                            </el-form-item>

                            <el-form-item label="供应商">
                                <el-select v-model="outHou.gongying" placeholder="选择供应商">
                                    <el-option :label="item" :value="index+1" v-for="(item, index) in supply"
                                               :key="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="选择时间">
                                <el-date-picker
                                        v-model="outHou.date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions"
                                        unlink-panels

                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <div class="btn-row">
                                    <el-button size="small" icon="el-icon-search" type="primary" @click="onSearchOut">搜索
                                    </el-button>
                                    <el-button size="small" type="primary" @click=onResetOut>重置</el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>

                <!--        表格主体-->
                <el-table
                        size="mini"
                        :data="chuData"
                        border
                        style="width:100%"
                        :cell-style="cell_style"
                        :header-cell-style="{background:'#3899FF',color:'#ffffff',textAlign:'center'}"
                        :default-sort="{prop:'create_time', order: 'descending'}"
                        class="zhuti"

                >
                    <el-table-column prop="goods_name" label="商品名称"></el-table-column>
                    <el-table-column prop="goods_price" label="商品单价">
                        <template slot-scope="scope">
                            ￥{{ (scope.row.goods_price) | keepTwoNum}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="goods_number" label="销售数量"></el-table-column>
                    <el-table-column prop="goods_total" label="总金额">
                        <template slot-scope="scope">
                            ￥{{ (scope.row.goods_total = scope.row.goods_price*scope.row.goods_number)
                            | keepTwoNum}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="出货时间"></el-table-column>
                    <el-table-column prop="supplier_name" label="供应商"></el-table-column>
                    <el-table-column prop="supplier_phone" label="供应商联系方式" width="180"></el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleEditOut(scope.$index, scope.row)">修改
                            </el-button>
                            <el-button type="danger" size="mini" @click=deleteOut>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--        分页-->
                <div>
                    <el-pagination
                            background
                            hide-on-single-page
                            layout="prev, pager, next"
                            :total="totalchu"
                            :page-size="8"
                            :pager-count="5"
                            :current-page="chucurrentPage"
                            @current-change="changePage"
                            class="fenye"
                    ></el-pagination>
                </div>


                <!--                修改弹窗-->
                <el-dialog title="修改出货信息" :visible.sync="dialogFormVisible" width="32%"
                           center>
                    <el-form :model="form" size="mini" class="xiugai">
                        <el-form-item label="商品名称:" :label-width="formLabelWidth">
                            <span>{{form.goods_name}}</span>
                        </el-form-item>
                        <el-form-item label="商品售价:" :label-width="formLabelWidth">
                            <el-input v-model="form.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="销售数量:" :label-width="formLabelWidth">
                            <el-input v-model="form.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="出货时间:" :label-width="formLabelWidth">
                            <el-date-picker
                                    v-model="form.create_time"
                                    type="date"
                                    size="mini"
                                    placeholder="选择日期"
                                    :picker-options="pickerOptions"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="供应商:" :label-width="formLabelWidth">
                            <el-select v-model="form.supplier_name" placeholder="选择供应商">
                                <el-option :label="item" :value="index+1" v-for="(item, index) in supply"
                                           :key="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="供应商联系方式:" :label-width="formLabelWidth">
                            <el-input v-model="form.supplier_phone"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" size="small" @click="submitEditOut">提 交</el-button>
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <!--            进货记录表-->
            <el-tab-pane label="进货记录">
                <div class="title_xiao">进货记录表</div>
                <el-row class="search-box">
                    <el-col :span="24">
                        <el-form :model="inHou" size="small" label-width="80px" class="search-form">
                            <el-form-item label="商品名称">
                                <el-input v-model="inHou.name" placeholder="请输入商品名称"></el-input>
                            </el-form-item>

                            <el-form-item label="供应商">
                                <el-select v-model="inHou.gongying" placeholder="选择供应商">
                                    <el-option :label="item" :value="index+1" v-for="(item, index) in supply"
                                               :key="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="选择时间">
                                <el-date-picker
                                        v-model="inHou.date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions"
                                        unlink-panels
                                >
                                </el-date-picker>

                            </el-form-item>
                            <el-form-item>
                                <div class="btn-row">
                                    <el-button size="small" icon="el-icon-search" type="primary" @click=onSearchIn>搜索
                                    </el-button>
                                    <el-button size="small" type="primary" @click=onResetIn>重置</el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>

                <!--        表格主体-->
                <el-table
                        size="mini"
                        :data="jinData"
                        border
                        style="width:100%"
                        class="zhutiIn"
                        :cell-style="cell_style"
                        :header-cell-style="{background:'#3899FF',color:'#ffffff',textAlign:'center'}"
                >
                    <el-table-column prop="goods_name" label="商品名称"></el-table-column>
                    <el-table-column prop="goods_price" label="单品成本价">
                        <template slot-scope="scope">
                            ￥{{ (scope.row.goods_price) | keepTwoNum}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="goods_number" label="商品数量"></el-table-column>
                    <el-table-column prop="goods_total" label="进货总成本">
                        <template slot-scope="scope">
                            ￥{{ (scope.row.goods_total=scope.row.goods_number*scope.row.goods_price) | keepTwoNum}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="进货时间"></el-table-column>
                    <el-table-column prop="supplier_name" label="供应商名称"></el-table-column>
                    <el-table-column prop="supplier_phone" label="供应商联系方式" width="180"></el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleEditIn(scope.$index, scope.row)">修改
                            </el-button>
                            <el-button type="danger" size="mini" @click=deleteIn>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--        分页-->
                <div>
                    <el-pagination
                            background
                            hide-on-single-page
                            layout="prev, pager, next"
                            :total="totalinto"
                            :page-size="6"
                            :pager-count="5"
                            :current-page="intocurrentPage"
                            @current-change="intochangePage"
                            class="fenye"
                    ></el-pagination>
                </div>

                <!--                修改弹窗-->
                <el-dialog title="修改进货信息" :visible.sync="dialogFormVisibleIn" width="32%"
                           center>
                    <el-form :model="formIn" size="mini" class="xiugai">
                        <el-form-item label="商品名称:" :label-width="formLabelWidth">
                            <span>{{formIn.goods_name}}</span>
                        </el-form-item>
                        <el-form-item label="商品成本价:" :label-width="formLabelWidth">
                            <el-input v-model="formIn.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="进货数量:" :label-width="formLabelWidth">
                            <el-input v-model="formIn.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="进货时间:" :label-width="formLabelWidth">
                            <el-date-picker
                                    v-model="formIn.create_time"
                                    type="date"
                                    size="mini"
                                    placeholder="选择日期"
                                    :picker-options="pickerOptions"
                            >

                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="供应商:" :label-width="formLabelWidth">
                            <el-select v-model="formIn.supplier_name" placeholder="选择供应商">
                                <el-option :label="item" :value="index+1" v-for="(item, index) in supply"
                                           :key="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="供应商联系方式:" :label-width="formLabelWidth">
                            <el-input v-model="formIn.supplier_phone"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" size="small" @click="submitEditIn">提 交</el-button>
                        <el-button size="small" @click="dialogFormVisibleIn = false">取 消</el-button>
                    </div>
                </el-dialog>

                <!--                新增进货-->
                <div class="title_xiao">添加进货记录</div>
                <div>
                    <el-form label-position="right" label-width="100px" :model="addform" size="mini">
                        <el-row class="heng">
                            <el-col :span="8">
                                <div class="grid-content kuang">
                                    <el-form-item label="商品名称">
                                        <el-input v-model="addform.goods_name"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content-light kuang">
                                    <el-form-item label="单品成本价">
                                        <el-input v-model="addform.goods_price"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content kuang">
                                    <el-form-item label="进货数量">
                                        <el-input v-model="addform.goods_number"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="heng">
                            <el-col :span="8">
                                <div class="grid-content kuang">
                                    <el-form-item label="进货时间">
                                        <el-date-picker
                                                type="date"
                                                placeholder="选择日期"
                                                v-model="addform.value1"
                                                style="width: 100%;"
                                                :picker-options="pickerOptions"
                                        ></el-date-picker>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content -light kuang">
                                    <el-form-item label="供应商">
                                        <el-input v-model="addform.supplier_name"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content kuang">
                                    <el-form-item label="联系方式">
                                        <el-input v-model="addform.supplier_phone"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>

                    </el-form>
                    <div class="juzhong">
                        <el-button size="small" type="primary" @click=addRecord>提交</el-button>
                        <el-button size="small" type="primary" @click=resetRecord>重置</el-button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>

    import axios from "../../tool/http";
    import api from "../../tool/api";

    export default {
        name: "ProductRecord",
        //保留两位小数的方法
        filters: {
            keepTwoNum(value) {
                value = Number(value);
                return value.toFixed(2)
            }
        },
        data() {
            return {
                outHou: {
                    name: "",
                    gongying: "",
                    date: "",
                },
                ////修改框数据 修改出货信息
                dialogFormVisible: false,
                dialogTableVisible: false,
                form: {
                    goods_name: "",
                    goods_price: "",
                    goods_number: "",
                    goods_total: "",
                    create_time: "",
                    supplier_name: "",
                    supplier_phone: "",
                },
                formLabelWidth: '120px',

                //进货
                inHou: {
                    name: "",
                    gongying: "",
                    date: ''
                },


                ////修改框数据 修改进货信息
                dialogFormVisibleIn: false,
                dialogTableVisibleIn: false,
                formIn: {
                    goods_name: "",
                    goods_price: "",
                    goods_number: "",
                    goods_total: "",
                    create_time: "",
                    supplier_name: "",
                    supplier_phone: "",
                },
                chucurrentPage: 1,
                //出货数据
                totalchu: 0,
                //供应商数据（假）
                supply: [],
                outData: [],
                //进货
                intoData: [],

                intocurrentPage: 1,
                //进数据
                totalinto: 0,
                //添加进货记录
                addform: {
                    goods_name: "",
                    goods_price: "",
                    goods_number: "",
                    supplier_name: "",
                    supplier_applier: "",
                    supplier_phone: "",
                    value1: new Date()
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
                    }
                },

            };
        },
        //============================================上面是data下面是methods
        methods: {
            // //以下方法实现表格文字居中
            cell_style(row, column, rowIndex, columnIndex) {
                return " text-align: center";
            },
            header_style(row, rowIndex) {
                return " text-align: center";
            },

            //搜索 查询 按钮
            onSearchOut() {
                if (this.outHou.name === "" && this.outHou.gongying === "" && this.outHou.date === "") {
                    this.$message({
                        type: 'warning',
                        message: '请输入查询条件！'
                    });
                } else {
                    axios({
                        url: api.searchOut,
                        data: this.outHou,
                        method: "post"
                    }).then(res => {
                        // console.log(res)
                        this.outData = res.data.data
                        this.totalchu = res.data.data.length
                    })
                }
            },
            //出货搜索重置
            onResetOut() {
                this.outHou.name = "";
                this.outHou.gongying = "";
                this.outHou.date = "";
                this.chucurrentPage=1
                this.getOutData()

            },

            //获取出货数据
            getOutData() {
                axios({
                    url: api.OutData,
                    method: "get",
                }).then(res => {
                    // console.log(res.data.data)
                    this.outData = res.data.data
                    this.totalchu = res.data.data.length

                })
            },
            //出货修改
            handleEditOut(index, item) {//修改框的表单拿到当前值
                this.dialogFormVisible = true
                // console.log(item.number)
                this.form.goods_name = item.goods_name
                this.form.goods_price = item.goods_price
                this.form.goods_number = item.goods_number
                this.form.create_time = item.create_time
                this.form.supplier_name = item.supplier_name
                this.form.supplier_phone = item.supplier_phone

            },
            //提交修改出货记录的方法
            submitEditOut() {
                axios({
                    url: api.updateOut,
                    method: 'post',
                    data: {
                        id: "string",
                        goods_name: this.form.goods_name,
                        goods_price: this.form.goods_price,
                        goods_number: this.form.goods_number,
                        create_time: this.form.create_time,
                        supplier_name: this.form.supplier_name,
                        supplier_phone: this.form.supplier_phone
                    }

                }).then(res => {
                    // console.log(res)
                    if (res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });

                    } else {
                        this.$message({
                            type: 'info',
                            message: '提交失败!请稍后再试！'
                        });
                    }
                    this.dialogFormVisible = false
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });


            },
            //拿假的供应商数据
            getsuplly() {
                axios({
                    url: api.supply_list,
                    method: "get",
                }).then(res => {
                    // console.log(res)
                    this.supply = res.data

                })

            },
            //出货删除
            deleteOut(index, num) {
                this.chuData.length === 1 ? this.chucurrentPage = this.chucurrentPage - 1 : this.chucurrentPage
                this.$confirm('确认删除这条记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url: api.deleteOut,
                        method: 'delete',
                        data: {id: num}
                    }).then(res => {
                        // console.log(res.data.code)
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else if (res.data.code === 400) {
                            this.$message({
                                type: 'info',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },


            //==================下面是进货的方法
            //搜索 查询 按钮
            onSearchIn() {
                if (this.inHou.name === "" && this.inHou.gongying === "" && this.inHou.date === "") {
                    this.$message({
                        type: 'warning',
                        message: '请输入查询条件！'
                    });
                } else {
                    axios({
                        url: api.searchInto,
                        data: this.inHou,
                        method: "post"
                    }).then(res => {
                        // console.log(res.data.data)
                        this.intoData = res.data.data
                        this.totalinto = res.data.data.length
                    })
                }
            },
            //重置
            onResetIn() {
                this.inHou.name = "";
                this.inHou.gongying = "";
                this.inHou.date = "";

                this.intocurrentPage=1
                this.getInData()


            },
            //点击跳页数
            //出货
            changePage(val) {
                this.chucurrentPage = val;
            },
            //
            //进货
            intochangePage(val) {
                this.intocurrentPage = val;
            },


            //获取进货数据
            getInData() {
                axios({
                    url: api.getIntoRecord,
                    method: "get",
                }).then(res => {
                    // console.log(res.data)
                    this.intoData = res.data.data
                    this.totalinto = res.data.data.length

                })
            },
            //进货的修改
            handleEditIn(index, item) {
                this.dialogFormVisibleIn = true
                // console.log(item.number)
                this.formIn.goods_name = item.goods_name
                this.formIn.goods_price = item.goods_price
                this.formIn.goods_number = item.goods_number
                this.formIn.create_time = item.create_time
                this.formIn.supplier_name = item.supplier_name
                this.formIn.supplier_phone = item.supplier_phone

            },
            //进货修改提交
            submitEditIn() {
                axios({
                    url: api.updateIntoRecord,
                    method: 'post',
                    data: {
                        id: "string",
                        goods_name: this.formIn.goods_name,
                        goods_price: this.formIn.goods_price,
                        goods_number: this.formIn.goods_number,
                        create_time: this.formIn.create_time,
                        supplier_name: this.formIn.supplier_name,
                        supplier_phone: this.formIn.supplier_phone
                    }

                }).then(res => {
                    // console.log(res)
                    if (res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });
                    } else {
                        this.$message({
                            type: 'info',
                            message: '提交失败!请稍后再试！'
                        });
                    }
                    this.dialogFormVisibleIn = false
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });


            },
            //进货删除
            deleteIn(index, num) {
                this.intoData.length === 1 ? this.intocurrentPage = this.intocurrentPage - 1 : this.intocurrentPage
                this.$confirm('确认删除这条进货记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url: api.deleteIntoRecord,
                        method: 'delete',
                        data: {id: num}
                    }).then(res => {
                        // console.log(res.data.code)
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else if (res.data.code === 400) {
                            this.$message({
                                type: 'info',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },


            //进货单添加
            addRecord() {
                let adddata = {
                    goods_name: this.addform.goods_name,
                    goods_price: this.addform.goods_price,
                    goods_number: this.addform.goods_number,
                    supplier_name: this.addform.supplier_name,
                    supplier_phone: this.addform.supplier_phone,
                    create_time: this.addform.value1
                }

                if(adddata.goods_name==="" ||adddata.goods_price==="" || adddata.goods_number==="" ||adddata.supplier_name==="" || adddata.supplier_phone==="" ||adddata.create_time==="" ){
                    this.$confirm('信息还没填写完整，不能提交！', '提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    })

                }else {
                    this.$confirm('确认删除该商品?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=>{
                        axios({
                            url: api.addIntoRecord,
                            data: adddata,
                            method: "post"
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '添加商品成功!'
                                });
                            } else if (res.data.code === 400) {
                                this.$message({
                                    type: 'info',
                                    message: '添加商品失败!'
                                });
                            }

                        })

                    })
                }
            },
            //重置进货表
            resetRecord() {
                this.addform.goods_name = ""
                this.addform.goods_price = ""
                this.addform.goods_number = ""
                this.addform.goods_total = ""
                this.addform.create_time = ""
                this.addform.supplier_name = ""
                this.addform.supplier_phone = ""
                this.addform.value1 = ""
                this.intocurrentPage=1
            }
        },
        // //============================================上面是methods 下面是created
        created() {
            this.getOutData()
            this.getInData()
            this.getsuplly()
        },
        computed: {
            chuData() {
                return this.outData.slice(
                    (this.chucurrentPage - 1) * 6,
                    (this.chucurrentPage - 1) * 6 + 6
                );
            },
            jinData() {
                return this.intoData.slice(
                    (this.intocurrentPage - 1) * 6,
                    (this.intocurrentPage - 1) * 6 + 6
                );
            }

        }

    };
</script>

<style scoped lang="less">
    .title_xiao {
        border-bottom: 1px solid #3899FF;
        text-align: left;
        padding: 5px;
        color: #3899FF;
        font-size: 14px;
        margin-top: 10px;
    }

    .search-box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 80px;
    }

    .heng {
        display: flex;
        padding: 20px 0 0 0;

        .kuang {
            width: 80%;
            margin: 0 auto;
        }
    }

    .xiugai {
        width: 90%;
        margin: 0 auto;
    }

    .search-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        height: 80px;
    }

    .search-form {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;

        .btn-row {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
        }
    }

    .fenye {
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }

    .juzhong {
        width: 80%;
        height: 60px;
        line-height: 60px;
        margin: 0 auto;
        text-align: center;
    }

    .zhuti {
        height: 280px;
    }
    .zhutiIn {
        height: 280px;
    }
</style>